﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习4：制作家用电器商品分类页面</title>
    <style>
        dl{
            margin:0 0 0 40px;
        }
        p{
            width: 300px;
            height: 35px;
            background-image: linear-gradient(#0668ad,#b4daf4);
            line-height: 35px;
            font-size: 18px;
            color: white;
            font-weight: bold;
            text-indent: 2em;
        }
        dt{
            width: 260px;
            height: 30px;
            background-image: linear-gradient(#e0effa,#bfe0f7,#e0effa);
            line-height: 30px;
            font-size: 14px;
            color:#0565c6;
            font-weight: bold;
            text-indent: 2em;
        }
        dt a:link{
            text-decoration:none;
        }
        dt a:hover{
            text-decoration:underline;
        }
        dd{
            width: 260px;
            height: 26px;
            font-size: 12px;
            line-height: 26px;
        }
        dd a:link{
            color: #cccccc;
            text-decoration: none;
        }
        dd a:hover{
            color: brown;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<p>家用电器</p>
<dl>
    <dt><a href="#">大家电</a></dt>
    <dd><a href="#">平板电视</a>  <a href="#">洗衣机</a>  <a href="#">冰箱</a></dd>
    <dd><a href="#">空调</a>  <a href="#">烟机/灶具</a>  <a href="#">热水器</a></dd>
    <dd><a href="#">冷柜/酒柜</a>  <a href="#">消毒柜</a>  <a href="#">家庭影院</a></dd>

    <dt><a href="#">生活电器</a></dt>
    <dd><a href="#">电风扇</a>  <a href="#">净化器</a>  <a href="#">吸尘器</a></dd>
    <dd><a href="#">净水设备</a>  <a href="#">挂烫机</a>  <a href="#">电话机</a></dd>

    <dt><a href="#">厨房电器</a></dt>
    <dd><a href="#">榨汁机</a>  <a href="#">电压力锅</a>  <a href="#">电饭煲</a></dd>
    <dd><a href="#">豆浆机</a>  <a href="#">微波炉</a>  <a href="#">电磁炉</a></dd>

    <dt><a href="#">五金家装</a></dt>
    <dd><a href="#">淋浴/水槽</a>  <a href="#">电动工具</a>  <a href="#">手动工具</a></dd>
    <dd><a href="#">仪器仪表</a>  <a href="#">浴霸/排气</a>  <a href="#">灯具</a></dd>
</dl>
</body>
</html>